<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>题目信息列表</title>

    <%@include file="/WEB-INF/views/commons/common.jsp" %>

    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/jquery-easyui/1.4.3/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/bootstrap-dialog3/css/bootstrap-dialog.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/validation-engine/validationEngine.jquery.css">
    <link rel="stylesheet" type="text/css" href="${base_href}/static/css/search-theme.css">
    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/layui-v2.3.0/layui/css/layui.css">

</head>
<body data-grid="easyui">
<div class="path"><span class="right-index">&gt;</span> 现在的位置：题目信息列表</div>
<div class="tab-content">
    <div style="height: 20px;"></div>
    <div class="layui-progress layui-progress-big" style="display: none;" lay-showPercent="yes"
         lay-filter="progressBar">
        <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
    </div>
    <div class="fold_ex">
        <h2 class="title-h2">
			<span style="width:100%;">
				<button type="button" class="btn search-btn" data-method="create"><i class="fa fa-plus"></i>&nbsp;创建题目&nbsp;</button>
				<button type="button" class="btn search-btn" data-method="createAsk"><i class="fa fa-plus"></i>&nbsp;录入疑问&nbsp;</button>
				<button type="button" class="btn search-btn" data-method="edit"><i class="fa fa-edit"></i>&nbsp;编辑&nbsp;</button>
				<button type="button" class="btn search-btn" id="uploadQuestion"><i class="fa fa-upload"></i>&nbsp;导入习题&nbsp;</button>

			</span>

            <a href="javascript:void(0);" class="hide-next-btn">收起</a>
        </h2>

        <div>
            <form action="#">
                <table class="search-table container">
                    <tr>
                        <td class="text-right col-xs-2">题目编号</td>
                        <td class="col-xs-4">
                            <input type="text" class="form-control" name="quesCode" value="" placeholder="支持模糊查询"/>
                        </td>
                        <td class="text-right col-xs-2">题目类型</td>
                        <td class="col-xs-4">
                            <select name="quesType" class="form-control">
                                <option value="" selected="selected">请选择</option>
                                <c:forEach items="${quesTypes}" var="state">
                                    <option value="${state.dicCode}">${state.dicValue}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>

                    <tr>
                        <td class="text-right col-xs-2">题目信息</td>
                        <td class="col-xs-4">
                            <input type="text" class="form-control" name="question" value="" placeholder="支持模糊查询"/>
                        </td>
                        <td class="text-right col-xs-2">题干信息</td>
                        <td class="col-xs-4">
                            <input type="text" class="form-control" name="stem" value="" placeholder="支持模糊查询"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-right col-xs-2">答案解析</td>
                        <td class="col-xs-4">
                            <input type="text" class="form-control" name="analysis" value="" placeholder="支持模糊查询"/>
                        </td>
                        <td class="text-right col-xs-2">问题来源</td>
                        <td class="col-xs-4">
                            <select name="quesSource" class="form-control">
                                <option value="" selected="selected">请选择</option>
                                <c:forEach items="${quesSources}" var="state">
                                    <option value="${state.dicCode}">${state.dicValue}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>

                    <tr>
                        <td class="text-right col-xs-2"></td>
                        <td class="text-right">
                            <button type="button" class="btn search-btn" data-method="search"><i
                                    class="fa fa-search"></i>&nbsp;查询&nbsp;
                            </button>
                            <button type="button" class="btn search-btn" data-method="clear"><i class="fa fa-trash"></i>&nbsp;清空&nbsp;
                            </button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>

        <hr class="search-line"/>
        <table class="easyui-datagrid">
            <thead>
            <tr>
                <th data-options="field:'id',checkbox:true">选择</th>
                <th data-options="field:'quesCode',width:20,align:'center'">题目编号</th>
                <th data-options="field:'quesTypeValue',width:20,align:'center'">题目类型</th>
                <th data-options="field:'question',width:40,align:'center'">主题干信息</th>
                <th data-options="field:'stem',width:50,align:'center'">题目信息</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<script type="text/javascript" src="${base_href}/static/ui-frame/jquery/1.11.3/jquery.js"></script>


<script type="text/javascript" src="${base_href}/static/ui-frame/iframe-auto-height/jquery.autoheight.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap/3.3.5/js/bootstrap.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap-dialog3/js/bootstrap-dialog.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/easyui.util.js"></script>
<script type="text/javascript"
        src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/layui-v2.3.0/layui/layui.js"></script>

<script type="text/javascript" src="${base_href}/static/ui-frame/requirejs/2.2.0/require.js"></script>

<script type="text/javascript">
    requirejs.config({
        baseUrl: '<c:url value="/static/"/>',
        paths: {
            Grid: 'component/grid/js/ms-grid',
        },
        config: {
            'Grid': {contextPath: '<c:url value="/"/>'},
        }
    });

    require(['Grid'], function (Grid) {
        Grid.columns({
            quesCode: {
                formatter: function (value, row, index) {
                    var v = value == null ? "" : $('<div/>').text(value).html();
                    return "<a href='javaScript:void(0);' onclick=\"grid.quesCode(event, " + index + ")\" class='grid-button' plain='true' title='" + v + "'><div>" + v + "</div></a>";
                },
                event: function (event, index) {
                    var row = this.grid.datagrid('getRows')[index];
                    var param = {id: row.id};

                    var url = basePath + "/question/readJump?" + $.param(param);
                    var screenLocation = "width=800px,height=700px,top=0,left=0,menubar=yes,resizable=yes,scrollbars =yes";
                    this.windowOpen(url, "详细信息", screenLocation);
                    event.stopPropagation();
                }
            }
            , stem: {
                formatter: function (value, row, index) {
                    var v = value == null ? "" : $('<div/>').text(value).html();
                    return "<div title='" + v + "'>" + v + "</div>";
                }
            }
            , question: {
                formatter: function (value, row, index) {
                    var v = value == null ? "" : $('<div/>').text(value).html();
                    return "<div title='" + v + "'>" + v + "</div>";
                }
            }
        });
        Grid.methods({
            create: function () {
                var url = basePath + "/question/draft";
                var screenLocation = "width=800px,height=700px,top=0,left=0,menubar=yes,resizable=yes,scrollbars =yes";
                this.windowOpen(url, "详细信息", screenLocation);

            }
            , createAsk: function () {
                var url = basePath + "/question/draftAsk";
                var screenLocation = "width=800px,height=700px,top=0,left=0,menubar=yes,resizable=yes,scrollbars =yes";
                this.windowOpen(url, "详细信息", screenLocation);
            }
            , edit: function () {
                var checked = this.grid.datagrid('getChecked');
                if (checked.length == 1) {
                    var that = this;
                    var id = checked[0].id;

                    var url = basePath + "/question/editJump?id=" + id;
                    var screenLocation = "width=800px,height=700px,top=0,left=0,menubar=yes,resizable=yes,scrollbars =yes";
                    this.windowOpen(url, "详细信息", screenLocation);
                } else {
                    BootstrapDialog.alert("请选择至少一道题目。");
                }

            }
        });
        $(function () {
            layui.use(['upload', 'element', 'layer'], function () {
                var url = basePath + "/import/uploadQuestions";
                var upload = layui.upload, element = layui.element, layer = layui.layer;
                upload.render({
                    elem: '#uploadQuestion'
                    , url: url
                    , accept: 'file'
                    , exts: 'xls|xlsx'
                    , progress: function (e, percent) {
                        console.log("进度：" + percent + '%');
                        element.progress('progressBar', percent + '%');
                    }
                    , before: function () {
                        $(".layui-progress").show();
                    }
                    , done: function (res, index, upload) {
                        //假设code=2000代表上传成功
                        if (res.code == 2000) {
                            layer.msg(res.message)
                        } else {
                            layer.alert(res.message)
                        }
                        $(".layui-progress").hide();
                        $(".layui-progress-bar").attr("lay-percent", "0%")
                    }
                    , error: function (a, b, c) {
                        console.log(a);
                        layer.alert("上传失败，请联系管理员")
                    }
                })
            });
            window.grid = Grid.events();
        })
    })
</script>


</body>
</html>
